<template>
<div>
  <div class="table-ctrl-body">
    <!--按钮组-->
    <div class="Btns-ctrl-body">
      <!--高级搜索-->
      <SearchPublic
        :searchObj="searchObj"
        @searchParams="searchParamsFn"
      ></SearchPublic>

      <div class="btns f-r">
        <button type="button" class="btn btn-info" @click="toggleAddModal">新增</button>
        <button type="button" class="btn btn-warning" @click="toggleUploadeModal('update')">修改</button>
        <button type="button" class="btn btn-warning" @click="toggleUploadeModal('detail')">详情</button>
        <button type="button" class="btn btn-danger" @click="deleteFn">删除</button>
      </div>
    </div>
    <!--按钮组闭合-->
    <!--表格组-->
    <div class="table-ctrl">
      <!--表格头-->
      <!--{{treeTableRow}}-->
      <div class="table-header">
        <table class="table-default">
          <thead>
          <tr>
            <th v-for="ths in tableHeader">
              {{ths.value}}
            </th>
          </tr>
          </thead>
        </table>
      </div>
      <!--表格中部-->
      <div class="table-overflowX">
        <table class="table-default">
          <tbody>
          <tr
            v-for="(trs,index) in tableRow.list"
            @click="selectRow(trs,index)"
            :class="{active: index === isActive}"
          >
            <td v-for="tds in tableHeader">
              {{trs[tds.key]}}
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!--表格翻页-->
      <Pages
        v-show="tableRow.total !== 0"
        v-if="tableRow"
        :showItem="10"
        :pageSize="Number(tableRowParams.pageSize)"
        :allDataSum="tableRow.total"
        :allpage="(Math.ceil(tableRow.total/tableRowParams.pageSize))"
        @current-change="tablePageData"
      ></Pages>

    </div>

    <!--新增-->
    <AddModel :addModalObj="addModalObj"
              @closeModal="toggleAddModal">
    </AddModel>

    <!--修改-->
    <UpdateModel :modalObj="uploadeModalObj"
                  @closeModal="toggleUploadeModal"></UpdateModel>

  </div>
</div>
</template>

<script>
  import Pages from "../../sudoku/atom/pages"
  import SearchPublic from "../../publicTemplate/search/SearchPublic"
  import AddModel from './AddModel'
  import UpdateModel from './UpdateModel'
  export default {
    name: "dataSources",
    data(){
      return{
        searchObj:{
          condition:[
            {"title":"数据源名称","key":"datasourceName",'type':'text',"value":'','data':''},
            {"title":"数据源类型","key":"datasourceType","value":'','type':'select','data': ''},
          ],
          htmlType:"searchDefaultPublic",
        },
        isActive:-1,
        selectRowId:"",
        tableHeader:[
          {"key":"datasourceName","value":"数据源名称"},
          {"key":"datasourceTypeName","value":"数据源类型"},
          {"key":"username","value":"账号"},
          {"key":"pwd","value":"密码"},
          {"key":"createTime","value":"创建时间"},
        ],
        filterData: [],
        tableRow: {
          list: [],
          total: 0
        },
        tableRowParams : {
          pageIndex:"1", //当前页
          pageSize:"20", //数量
        },
        addModalObj:{
          isShow:false,
        },
        uploadeModalObj:{
          isShow: false,
          id:"",
          type: ''
        },
      }
    },
    components:{
      Pages,
      SearchPublic,
      AddModel,
      UpdateModel
    },
    created(){
      this.getDataSourceType()
    },
    mounted(){
      this.tableRowAjax();
    },
    methods:{
      // 获取数据源类型
      getDataSourceType () {
       return this.$axios({
          url: this.Dictionary + "/tag/detail/type/datasourceType/key/datasourceType",
          method: 'get'
        }).then(res => {
          let data = []
          res.data.objs.map(item => {
            data.push({
              key: item.name,
              value: item.code
            })
          })
          this.searchObj.condition[1].data = data
          this.filterData = data
          //console.log(this.searchObj.condition[1].data);
        }).catch(err => {
          console.log(err, '数据源类型')
        })
      },
      // 通过数据源类型
      filterDataFn (type) {
        let data = this.filterData.filter(item => {
          if (item.value == type) {
            return true
          }
        })
        return data[0].key
      },
      //加载表格
      tableRowAjax(){
        //GET datasource/queryList 'http://172.16.0.94:20502/datasource/queryList?datasourceName=11&datasourceType=11&size=17&current=1'
        //清除选择
        this.clearSelect();
        this.s_loading(true)
        if(this.filterData.length <= 0) {
          this.getDataSourceType().then( sourceData => {
            this.tableRowRealAjax()
          })
        } else {
          this.tableRowRealAjax()
        }
      },
      tableRowRealAjax () {
        let _url = this.Beacon +
          '/datasource/queryList?' +
          'datasourceName=' + encodeURIComponent(this.searchObj.condition[0].value) +
          '&datasourceType=' + this.searchObj.condition[1].value +
          '&size=' +
          this.tableRowParams.pageSize +
          '&current=' +
          this.tableRowParams.pageIndex
        this.$axios.get(_url)
          .then((data)=>{
            //console.log(data);
            let _list = []
            data.data.content.records.map((item, index) => {
              _list.push(item)
              _list[index]['datasourceTypeName'] = this.filterDataFn(item.datasourceType)
            })
            this.tableRow.list = _list;
            console.log(this.tableRow.list);
            this.tableRow.total = data.data.content.total;
            this.s_loading(false)
          })
          .catch((err)=>{
            //console.log(err);
          })
      },
      //翻页加载
      tablePageData(page){
        this.tableRowParams.pageIndex = page
        this.tableRowAjax();
        //console.log(page);
      },
      //新增弹窗显示与隐藏
      toggleAddModal(){
        this.addModalObj.isShow = !this.addModalObj.isShow;
        if( this.addModalObj.isShow === false ){
          //重新加载表格
          this.tableRowAjax();
        }
      },
      //修改弹窗显示与隐藏
      toggleUploadeModal(str){
        if( this.selectRowId !=="" ){
          this.uploadeModalObj.isShow = !this.uploadeModalObj.isShow;
          this.uploadeModalObj.type = str;
          this.isDetailsModal = false;
        }else{
          if (str == 'update') {
            this.s_alert("请选择需要修改的数据源！");
            return
          } else if (str == 'detail') {
            this.s_alert("请选择需要查看的数据源！");
            return
          }
        }
        if( this.uploadeModalObj.isShow === false ){
          //重新加载表格
          this.tableRowAjax();
        }
      },
      //选择行
      selectRow(obj,index){
        // console.log(JSON.stringify(obj));
        this.selectRowId = obj.id;
        this.uploadeModalObj.id = obj.id;
        this.isActive = index;
      },
      //删除
      deleteFn(){
        if( this.selectRowId !=="" ){
          let msg = confirm("请问是否删除该数据源？");
          if( msg ){
            //DELETE /datasource/delete/{}
            this.$axios.delete(this.Beacon+"/datasource/delete/" + this.selectRowId)
              .then((data)=>{
                this.s_alert("删除成功！");
                this.tableRowAjax();
              })
              .catch((err)=>{
                this.s_alert("删除失败！");
                //console.log(err);
              })
          }
        }else{
          this.s_alert("请选择需要删除的数据源！");
        }
      },
      //搜索
      searchParamsFn(searchParams){
        this.tableRowAjax();
      },
      //清除选择
      clearSelect(){
        this.isActive = -1;
        this.selectRowId = "";
        this.uploadeModalObj.id = "";
      }
    },
  }
</script>

<style scoped>

</style>
